<template>
    <div id="leftNav">
        <el-menu
                class="el-menu-vertical-demo"
                text-color="#ffffff"
                background-color="#00B8D2"
                active-text-color="#ffffff"
                :default-active="leftNavActive"
                router
        >
            <el-menu-item
                    v-for="(item,index) in leftNavData"
                    :key="index"
                    :index=item.path
                    @click="getRouter(item.path,item.name)"
            >
                <div>
                    <i :class=item.iconName></i>
                </div>
                <span slot="title">{{item.name}}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    export default {
        name: "LeftNav",
        data(){
            return{
                leftNavData:[
                    {path:'/Main/Home',iconName:'el-icon-house',name:'首页'},
                    {path:'/Main/Order',iconName:'el-icon-document',name:'订单'},
                    {path:'/Main/Goods',iconName:'el-icon-shopping-bag-1',name:'商品'},
                    {path:'/Main/Money',iconName:'el-icon-bank-card',name:'资金'},
                    {path:'/Main/Promotion',iconName:'el-icon-present',name:'促销'},
                    {path:'/Main/Notice',iconName:'el-icon-chat-dot-round',name:'通知'},
                ]
            }
        },
        computed: {
            leftNavActive: {
                get: function () {
                    let arr = this.$route.path.split('/');
                    switch (arr[3]) {
                        case 'PurchaseOrder':
                            return '/Main/Order'
                        case 'ReturnsOrder':
                            return '/Main/Order'
                        case 'StatisticDelivery':
                            return '/Main/Order'
                        case 'StatisticOrder':
                            return '/Main/Order'
                        case 'GoodsList':
                            return '/Main/Goods'
                        case 'GoodsCollection':
                            return '/Main/Goods'
                        case 'GoodsCart':
                            return '/Main/Goods'
                        case 'CapitalAccount':
                            return '/Main/Money'
                        case 'PaymentDetails':
                            return '/Main/Money'
                    }
                }
            },
            set: function () {
            }

        },
        methods: {
            ...mapActions(['routerFun']),
            getRouter(path,name) {
                let obj = {path,name}
                this.routerFun(obj)
            }
        }
    }
</script>

<style scoped lang="less">
 #leftNav {
     height: 100%;
     .el-menu {
         width: 99%;
         .el-menu-item {
             height: 100px;
             div:nth-child(1){
                 height: 50px;
                 width: 100%;
                 text-align: center;
                 i{
                     height: 50px;
                     width: 100%;
                     font-size: 40px;
                     color: #ffffff;
                 }
             }
             span{
                 display: inline-block;
                 height: 30px;
                 margin-top: -20px;
                 line-height: 30px;
                 font-size: 16px;
                 font-weight: bold;
             }
         }
     }
 }
</style>